<!-- 定义模版对象 -->
<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域-->
      <div class="avatar_box">
        <img src="../assets/tx.jpg" alt="酒店图片" />
      </div>

      <!-- 登陆表单区域
              ref代表当前表单引用对象
             :model 是表格中封装的对象
        -->
      <el-form ref="loginFormRef" label-width="0" class="login_form" :model="loginForm" :rules="rules">
        <el-form-item prop="userName">
          <el-input prefix-icon="iconfont iconuser" v-model="loginForm.userName"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="iconfont iconsuo" type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <!-- 定义添加按钮-->
          <el-button type="primary" @click="dialogVisible = true">注册</el-button>
          <el-button type="primary" @click="login">登录</el-button>
          <el-select v-model="loginForm.value" placeholder="请选择种类">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button type="info" @click="resetBtn">重置</el-button>
        </el-form-item>
      </el-form>

    </div>

<!-- 编辑员工新增对话框 visible.sync 控制对话框的显示-->
    <el-dialog title="用户注册" :visible.sync="dialogVisible" width="50%" @close="closeDialog">

      <!-- 定义员工提交表单数据-->
      <el-form :model="signuser" :rules="rules" ref="adduserRef" label-width="100px" class="demo-ruleForm">

        <el-form-item label="姓名" prop="userName">
          <el-input v-model="signuser.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="signuser.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="密码确认" prop="password2">
          <el-input v-model="signuser.password2" type="password"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="signuser.phone"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="number">
          <el-input v-model="signuser.number"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="signuser.sex"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="signuserBtn">注 册</el-button>
      </span>
    </el-dialog>
  </div>


</template>

<!-- 定义JS变量 -->
<script>
  export default {
    data() {
      //校验身份证号码规则 rule校验规则   value校验的数据   callback回调函数
      const checkNumber = (rule, value, callback) => {
        //定义身份证号码的正则表达式  JS中用/来表示正则表达式的开始和结束
        const numberRege = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        //正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回false
        if (numberRege.test(value)) {
          //表示身份证号码合法 正确返回
          return callback()
        }
        callback(new Error('请填写正确的身份证号码'))
      }
      //校验手机号的身份证号码规则
      const checkPhone = (rule, value, callback) => {

        //定义校验手机号的正则语法
        const phoneRege = /^1[34578][0-9]{9}$/
        if (phoneRege.test(value)) {

          return callback()
        }
        callback(new Error('请填写正确的手机号'))

      }

      const checkPassword = (rule, value, callback) => {
        if(this.adduserModel.password !== value) return callback(new Error('2次密码输入不一致'))
        //否则校验成功
        callback()
      }
      return {
        signuser: {
          value: '',
          userName: '',
          password: '',
          password2: '',
          phone:  '',
          number:  '',
          sex: ''
        },
        dialogVisible: false,
        loginForm: {
          userName: '',
          password: '',
          value: 3,
        },
        options: [{
          value: 1,
          label: '管理员'
        }, {
          value: 2,
          label: '前台'
        }, {
          value: 3,
          label: '用户'
        }],
        value: '',
        //定义表单的验证规则
        rules: {
          //定义校验用户名
          userName: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 30,
              message: '长度在 2 到 30 个字符',
              trigger: 'blur'
            }
          ],
          //定义校验密码
          userpwd: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 30,
              message: '长度在 3 到 30 个字符',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      closeDialog(){
        //重置表格数据
        this.$refs.adduserRef.resetFields()
      },
      resetBtn() {
        //this对象代表当前组件对象
        //console.log(this)
        //实现数据重置
        this.$refs.loginFormRef.resetFields()
      },
      login() {
        //获取表单对象之后进行数据校验
        //valid 表示校验的结果 true表示通过  false表示失败
        this.$refs.loginFormRef.validate(async valid => {
          //如果没有完成校验则直接返回
          if (!valid) return
          localStorage.setItem("userName",this.loginForm.userName)
          //如果校验成功,则发起ajax请求
          const {
            data: result
          } = await this.$http.post('/user/login', this.loginForm)
          if (result.status !== 200) return this.$message.error("用户登录失败")
          this.$message.success("用户登陆成功")

          //获取用户token信息
          let token = result.data
          window.sessionStorage.setItem("token", token)
          //用户登录成功之后,跳转到角色页面
          if(this.loginForm.value===1){
            this.$router.push("/admin")
          }
          if(this.loginForm.value===2){
            this.$router.push("/qiantai")
          }
          if(this.loginForm.value===3){
            this.$router.push("/guke")
          }
        })
      },
      //校验员工数据
      signuserBtn(){
        this.$refs.adduserRef.validate(async valid => {
          //如果校验失败 则停止数据
          if(!valid) return
          //console.log(this.signuser)
          const {data: result} = await this.$http.post('/user/signUser',this.signuser)
          if(result.status !== 200) return this.$message.error("用户注册失败")
          this.$message.success("用户注册成功")
          //关闭对话框
          this.dialogVisible = false

        })
        }
    }
  }
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
  .login_container {
    background-image: url(../assets/fm.jpg);
    height: 100%;
  }

  .login_box {
    width: 550px;
    height: 300px;
    background-color: #F0F8FF;
    /* 设定圆弧角*/
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);


    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #EEEEEE;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #DDDDDD;
      /* 添加阴影*/
      position: absolute;
      /* 绝对定位*/
      left: 50%;
      /* 距离左侧50%*/
      transform: translate(-50%, -50%);
      /*回调50%*/
      background-color: #FFFFFF;

      img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background-color: #EEEEEE;
      }
    }

    .btns {
      display: flex;
      justify-content: flex-end;

    }

    .login_form {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
</style>
